<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <meta th:name="_csrf" th:content="${_csrf.token}"/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
    <meta th:name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title>基本信息</title>
    <link rel="stylesheet" th:href="@{/static/component/pear/css/pear.css}" />
    <!-- jquery-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--bootstrap-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <link href="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/css/fileinput.min.css" rel="stylesheet">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <!--    引入alibaba iconfont-->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2994454_jfo9lx58sx.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_2994454_wlpdbkmmipc.css">
    <!--css-->
    <link rel="stylesheet" th:href="@{/static/resource/css/reset.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/index.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/cart.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/home.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/order.css}"/>
    <link rel="stylesheet" th:href="@{/static/resource/css/common/common.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/search.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/focusImg.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/focusImgMult.css}"/>
    <link rel="stylesheet" th:href="@{/static/js/directives/css/ulBox2.css}"/>
    <!--    layui-->
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">

    <script th:src="@{/static/component/layui/layui.js}"></script>
    <script th:src="@{/static/component/pear/pear.js}"></script>


    <!-- 如果你想在上传之前修改图片大小需要加入canvas-to-blob.min.js  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.js"></script>

    <!-- 如果你想在最初的预览中排序/重新排列需要引入sortable.min.js  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/plugins/sortable.min.js"></script>

    <!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is  它必须在fileinput.min.js之前引入 -->
    <script src="https://cdn.bootcss.com/dompurify/1.0.10/purify.min.js"></script>

    <!-- 主要的 fileinput 插件库 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>

    <!-- 如果你想在放大的模态页面中查看文件详细信息需要引入bootstrap.js   ****引入这个后模态框闪退 -->
<!--    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>-->

    <!-- 可选，如果你需要像font awesome 这样的主题，就像下面的代码一样引入它 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/fa.min.js"></script>

    <!-- 可选，如果你需要转换语言或翻译，就包含这个库 -->
    <script src="https://cdn.bootcss.com/bootstrap-fileinput/5.0.1/js/locales/zh.min.js"></script>

</head>


<style>


    * {
        box-sizing: border-box;
    }

    /* 下拉框*/

    .dropbtn {
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        z-index: 100;
        margin-left:25px
    }

    .dropdown-content {
        display: none;
        background-color: #f9f9f9;
        min-width: 50px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {background-color: #f1f1f1}

    .show {display:block;}

/*    内容*/
    #box{

        width: 100%;
        height: 830px;

    }

    #leftbox{

        width: 200px;
        height: 400px;
        border: 2px solid #666666;


        float: left;
        margin-left: 160px;
        margin-top: 70px;
    }

    #leftMenu{

        width: 150px;
        height: 200px;
        /*border: 1px solid;*/
        margin: 0 auto;
        margin-top: 23%
    }


    #leftMenu ul>li
    {
        list-style: none;
        line-height: 35px;
        margin-left: 40px;
    }
    #leftMenu ul>li>a{

        text-decoration: none;
        color: #000000;

    }



    #rightBox{

        width: 60%;
        height: 700px;
        border: 1px solid  #666666;

        float: left;
        margin-left: 20px;
        margin-top: 40px;
    }

    #rightContent{

        width: 70%;
        height: 520px;
        margin: 0 auto;
    }


    .to {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }

    .to1 {
        width: 104px;
        height: 104px;
        border-radius: 50%;
        background-color: white;
        position: relative;
    }

    .to2 {
        width: 104px;
        height: 104px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -52px;
        margin-top: -52px;
    }

    .to3 {
        width: 106px;
        height: 106px;
        border-radius: 50%;
        background-color: aqua;
        position: relative;
    }

    .info{

        line-height: 40px;
        /*两行超出变成...*/
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }


    .topbar a:hover{
        color: orange;
    }

</style>




<body>

<!--头部工具栏-->
<div class="topbar">
    <div class="container">
        <div class="topbar_nav fl">
            <ul>
                <li><a th:href="@{/web/index/}">首页</a></li>
                <li><a th:href="@{/web/couponsActivity/toCouponsActivity}">领劵中心</a></li>
                <li><a th:href="@{/web/seckill/toSearchSeckillPage}">秒杀</a></li>
                <li><a href="https://github.com/youzhengjie9/cloud-mall">项目链接</a></li>
            </ul>
        </div>
        <div class="topbar_cart fr">
            <a href="/web/cart/tocart">购物车</a>
        </div>

        <div class="topbar_cart fr">
            <a href="/web/order/toOrderPage">我的订单</a>
        </div>

        <div class="topbar_cart fr">
            <a href="/web/seckill/toSeckillSuccessList">秒杀成功订单</a>
        </div>

        <div class="topbar_info fr" style="width:220px">
            <form name="logoutform" th:action="@{/web/logout/logout}" method="post"></form>
            <a class="nav-link" th:href="@{/web/register/toregister}">注册</a>
            <a class="nav-link" sec:authorize="isAnonymous()" th:href="@{/web/login/toLoginPage}">登录</a>
            <a sec:authorize="isAuthenticated()" class="nav-link dropbtn" onclick="myFunction()">[[${username}]]</a>
            <a href="#" onclick="kefu(1)">人工客服</a>
            <div class="dropdown">
                <div id="myDropdown" class="dropdown-content" style="width: 120px;height: 70px">
                    <a th:href="@{/web/center/toBaseInfo}" style="width: 100px;height: 30px;">个人中心</a>
                    <a href="javascript:document.logoutform.submit();" style="width: 100px;height: 30px;">退出登录</a>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 修改用户名模态框-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="post" action="#" autocomplete="off">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">修改用户名</h4>
            </div>
            <div class="modal-body">
                新用户名：<input type="text" class="form-control" name="username" required>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">修改</button>
            </div>
        </div>
        </form>

    </div>
</div>



<!-- 修改性别模态框-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <form id="sexForm" method="post" th:action="@{/web/center/updateSex}" autocomplete="off">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel2">修改性别</h4>
                </div>
                <div class="modal-body" th:if="${user.userDetail.sex==0}">

                    <label class="radio-inline"><input type="radio" name="sex" value="0" checked>男</label>
                    <label class="radio-inline"><input type="radio" name="sex" value="1">女</label>
                </div>

                <div class="modal-body" th:if="${user.userDetail.sex==1}">

                    <label class="radio-inline"><input type="radio" name="sex" value="0">男</label>
                    <label class="radio-inline"><input type="radio" name="sex" value="1" checked>女</label>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button onclick="changeSex()" type="button" class="btn btn-primary">修改</button>
                </div>
            </div>
        </form>

    </div>
</div>




<!-- 修改个性签名模态框-->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog">
        <form id="signatureForm" method="post" th:action="@{/web/center/updateSignature}" autocomplete="off">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel3">修改个性签名</h4>
                </div>
                <div class="modal-body">
                    个性签名：
                    <textarea th:if="${user.userDetail.signature eq null or user.userDetail.signature eq ''}" name="signature" required="true" style="width: 400px;height: 90px;border: 1px solid"></textarea>
                    <textarea th:if="${user.userDetail.signature ne null and user.userDetail.signature ne ''}" th:text="${user.userDetail.signature}" name="signature" required="true" style="width: 400px;height: 90px;border: 1px solid"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button onclick="changeSignature()" type="button" class="btn btn-primary">修改</button>
                </div>
            </div>
        </form>

    </div>
</div>



<!-- 修改头像模态框-->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
    <div class="modal-dialog">
        <form id="iconForm" method="post" th:action="@{/web/center/updateIcon}" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel4">修改头像</h4>
                </div>
                <div class="modal-body">

                    <input id="uploadPicture"
                           name="file" type="file"
                           multiple=true class="file-loading">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button onclick="changeIcon()" type="button" class="btn btn-primary">修改</button>
                </div>
            </div>
        </form>

    </div>
</div>




<!--左侧导航以及右侧内容-->
<div id="box">

    <div id="leftbox">

        <div id="leftMenu">

            <span class="iconfont icon-zhanghu" style="color: red;font-size: 25px;"></span>
            <span><b>我的账户</b></span>
            <ul>
                <li>
                    <a href="#" style="color: red;pointer-events: none;">个人信息</a>
                </li>
                <li>
                    <a th:href="@{/web/center/toChangePassword}">修改密码</a>
                </li>

                <li>
                    <a th:href="@{/web/center/toWallet}">我的钱包</a>
                </li>

                <li>
                    <a th:href="@{/web/center/toCouponsRecord}">我的优惠券</a>
                </li>

            </ul>

        </div>



    </div>


    <!--  右边-->

    <div id="rightBox">

        <!--头像-->
        <div style="width:95%;height: 124px;" align="center">

            <div class="to3" align="center">
                <div class="to2" align="center">
                    <div class="to1" align="center">
                        <img class="to" alt="我的头像" th:src="${user.userDetail.icon}">
                    </div>
                </div>
            </div>

        </div>

        <div id="changeImg" style="width: 100px;height: 60px;margin: 0 auto;">
            <a href="#" style="color: blue" data-toggle="modal" data-target="#myModal4">修改头像</a>
        </div>

        <!-- 信息内容-->
        <div id="rightContent">


            <div class="info">
                用户名：<span th:text="${user.username}"></span>

                <span>
<!--             <a href="#" style="color: blue" data-toggle="modal" data-target="#myModal1">修改</a>-->
                </span>

                <br/>
            </div>

            <div class="info">
                邮箱：<span th:text="${user.email}"></span><br/>
            </div>

            <div class="info">
                拥有权限：
                <span th:if="${user.userAuthority.authority_id==1}">超级管理员</span>
                <span th:if="${user.userAuthority.authority_id==2}">普通用户</span>
                <span th:if="${user.userAuthority.authority_id==3}">暂无该权限</span>
                <br/>
            </div>

            <div class="info">
                注册时间：<span th:text="${user.date}"></span><br/>
            </div>

            <div class="info">
                性别：
                <span th:if="${user.userDetail.sex==0}">男</span>
                <span th:if="${user.userDetail.sex==1}">女</span>

                <span>
             <a href="#" style="color: blue" data-toggle="modal" data-target="#myModal2">修改</a>
                </span>

                <br/>
            </div>

            <div class="info">
                个人签名：
                <span th:text="${user.userDetail.signature}"></span>
                <span>
             <a href="#" style="color: blue" data-toggle="modal" data-target="#myModal3">修改</a>
                </span>
                <br/>
            </div>

        </div>




    </div>

</div>


</body>

<script>
    // 获取<meta>标签中封装的_csrf信息 ,否则会请求403
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    var headers = {"X-CSRF-TOKEN": token}
    /* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // 点击下拉菜单意外区域隐藏
    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }


    function changeSex()
    {

        let b = confirm('确定要修改此性别？');

        if(b==true)
        {
            $.ajax({
                url:'/web/center/updateSex',
                data: $('#sexForm').serialize(),
                dataType:'json',
                type:'post',
                headers: headers,
                success:function(result){
                    if(result.success){
                         alert('修改成功');
                         window.location.reload();
                    }else{
                        alert('修改失败');
                        window.location.reload();
                    }
                }
            })

        }


    }



    function changeSignature()
    {

        let b = confirm('确定要修改此个性签名？');

        if(b==true)
        {
            $.ajax({
                url:'/web/center/updateSignature',
                data: $('#signatureForm').serialize(),
                dataType:'json',
                type:'post',
                headers: headers,
                success:function(result){
                    if(result.success){
                        alert('修改成功');
                        window.location.reload();
                    }else{
                        alert('修改失败');
                        window.location.reload();
                    }
                }
            })

        }


    }



    function changeIcon()
    {

        let b = confirm('是否要修改此头像？');

        if(b==true)
        {
            var data = new FormData($('#iconForm')[0]);
            $.ajax({
                url: "/web/center/updateIcon",
                data: data,  //ajax提交表单
                dataType: 'json',
                type: 'POST',
                headers: headers,
                async: false,
                processData: false,
                contentType: false,
                success: function (result) {
                    if (result.success) {
                        alert('修改成功');
                        window.location.reload();
                    } else {
                        alert('修改失败');
                        window.location.reload();
                    }
                }
            })
        }



    }



    //图片上传
    $(function () {
        $("#uploadPicture").fileinput({
            uploadUrl: "/web/center/updateIcon",
            previewFileType: "image",
            uploadAsync: true,
            showCaption: false,
            allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp"],
            enctype: 'multipart/form-data',
            //隐藏上传按钮
            showUpload: false,
            //最大上传文件数量
            maxFileCount: 1,
            maxFileSize: 3072,
            showBrowse: true,
            dropZoneTitle: '拖拽头像图片到这里...',
            browseLabel: "选择图片",
            uploadClass: "btn btn-info",
            uploadLabel: "上传",
            removeClass: "btn btn-danger",
            autoReplace: true,
            removeLabel: "移除",
            msgSizeTooLarge: '图片文件太大！',
            msgFilesTooMany: "选择上传的文件数量为({n}) 超过允许的最大数值({m})！",
            msgUploadEnd: '图片上传成功！',
            msgUploadBegin: '初始化中...',
            msgZoomModalHeading: '图片详情预览',
            msgInvalidFileExtension: '非法文件扩展名 "{name}"！ 仅支持 "{extensions}" 的文件扩展名！'
        }).on('fileerror', function (event, data, msg) {
            alert('图片上传失败！' + msg);
        }).on('fileuploaded', function (event, data) {
            $("#picName").val(data.response.name);
            $('#uploadPicture').fileinput('disable');
        }).on('fileclear', function (event) {
            alert("图片被清除啦！");
        });

    });


    function kefu(e) {
        $.ajax({
            url:'/web/chat/HasGotoKefu',
            dataType:'json',
            type:'get',
            success:function(result){

                if(result==true){
                    window.location.href='http://localhost:5677/chat/toChat';
                }else {
                    alert('当前咨询人数过多,客服都忙不过来了,请等会儿再咨询！')
                }

            },
            error:function () {
                alert('您可能还没有登录,请登录!')
            }
        })

    }


</script>




</html>